<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style>
html {
  font-size: calc(100vw / 3.75);
}
body {
  margin: 0;
  font-family: PingFangSC-Regular, -apple-system, BlinkMacSystemFont,
               'avenir next', avenir,
               helvetica, 'helvetica neue',
               Ubuntu,
               'segoe ui', arial,
               sans-serif;
  color: #333333;
  background-color: #f1f3f5;
}
a, a:hover, a:visited, a:active {
  text-decoration: none;
  color: #333333;
}
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-enter
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(100%);
}
.slide-right-enter-active {
  transition: all .3s ease;
}
.slide-right-enter
/* .slide-right-enter-active for below version 2.1.8 */ {
  transform: translateX(-100%);
}
.slide-bottom-enter-active {
  transition: all .3s ease;
}
.slide-bottom-enter
/* .slide-right-enter-active for below version 2.1.8 */ {
  transform: translateY(100%);
}
.regular {
  font-family: PingFangSC-Regular, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', Ubuntu, 'segoe ui', arial, sans-serif
}
.semibold {
  font-family: PingFangSC-Semibold, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', Ubuntu, 'segoe ui', arial, sans-serif;;
}
.clearfix {
    overflow: hidden;
    zoom: 1;
    clear: both;
}
</style>

<script>
export default {
  data () {
    return {
      transitionName: ''
    }
  },
  watch: {
    '$route' (to, from) {
      var toArr = to.path.split('/');
      //console.log(fromArr[1]);
      if(toArr[1] == 'welcome'){
        this.transitionName = 'slide-fade'
      }else{
        this.transitionName = ''
      }
    }
  }
}
</script>